<template>
  <view class="content">
    <!-- <empty v-if=""></empty> -->
	<view class="blank-box" v-if="addressList.length === 0">
		<image mode="aspectFit" src="../../../static/blank-address.png" class="blank-icon"></image>
		<button class="submit-btn" @click="saveAddress('')">添加地址</button>
	</view>
	<template v-else>
		<view class="list" v-for="(item, index) in addressList" :key="index" @click="checkAddress(item)">
			<view class="list-item">
				<view class="wrapper">
					<view class="u-box">
					  <text v-if="item.defaultStatus == 0" class="tag">默认</text>
					  <text class="name">{{item.name}}</text>
					  <text class="mobile">{{item.phoneNumber}}</text>
					</view>
					<view class="address-box">
					  <text class="address">{{ item.province }}{{ item.city }}{{ item.region }}{{ item.detailAddress }}</text>
					</view>
				</view>
				<image mode="aspectFit" src="../../../static/image/edit-icon.png" class="icon" @click.stop="saveAddress(item.id)"></image>
			</view>
		  
		</view>
		<view class="add-btn" @click="saveAddress('')">
			<image mode="aspectFit" src="../../../static/image/add-btn.png" class="icon"></image>
			<view class="add-tips">添加地址</view>
		</view>
		<!-- <button class="add-btn" style="background-color: #7EAFA5;">新增地址</button> -->
	</template>
   
  </view>
</template>

<script>
  import empty from "@/components/empty";
  import {
    mapState,
    mapMutations
  } from 'vuex';
  export default {
    components: {
      empty
    },
    data() {
      return {
        source: 0,
        refresh: "",
        addressList: []
      }
    },
    watch: {
		refresh: function(){
			this.inquiryAddress();
		}
      // refresh(newVal, oldVal) {
      //   if(newVal) {
      //     location.reload();
      //   }
      // }
    },
    onShow(option) {
      this.inquiryAddress();
    },
    computed: {
      ...mapState(['hasLogin', 'userInfo'])
    },
    methods: {
      change(open) {
        console.log('当前开启状态：' + open)
      },
      //选择地址
      checkAddress(item) {
        if (this.source == 1) {
          //this.$api.prePage()获取上一页实例，在App.vue定义
          this.$api.prePage().addressData = item;
          uni.navigateBack()
        }
      },
      saveAddress(id) {
        uni.navigateTo({
        	url:"/pages/sys/shopCart/addressManage?id="+id
        })
      },
      //添加或修改成功之后回调
      refreshList() {
        this.inquiryAddress();
      },
      //查询收货地址
      inquiryAddress() {
        try {
          this.$api.request.getMemberReceiveAddrList(res => this.addressList = res.data);
        } catch (e) {
          console.log(e);
        }
      },
	  
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    position: relative;
	min-height: 100vh;
	padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	background: #F7F8FA;
  }

  .list {
    padding: 24rpx;
    position: relative;
	.list-item{
		background: #fff;
		border-radius: 16rpx;
		padding: 20rpx 32rpx 22rpx 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.0400);
		.icon{
			width: 32rpx;
			height: 32rpx;
			display: block;
			margin-left: 20rpx;
		}
	}
  }

  .wrapper {
    flex: 1;
	overflow: hidden;
  }

  .address-box {
    display: flex;
    align-items: center;
	margin-top: 8rpx;
    .address {
      font-size: 28rpx;
      color: #999999;
    }
  }

  .u-box {
    .name {
		margin-right: 18rpx;
		font-size: 32rpx;
		color: #111;
    }
	.mobile{
		font-size: 28rpx;
	}
    .tag {
      font-size: 24upx;
      color: $base-color;
      margin-right: 10upx;
      background: #fffafb;
      border: 1px solid #7EAFA5;
      border-radius: 4upx;
      padding: 4upx 10upx;
      line-height: 1;
    }
  }

  .icon-bianji {
    display: flex;
    align-items: center;
    height: 80upx;
    font-size: 40upx;
    color: $font-color-light;
    padding-left: 30upx;
  }

  .add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    .icon{
		width: 32rpx;
		height: 32rpx;
		margin-right: 16rpx;
	}
	.add-tips{
		font-size: 32rpx;
		color: #111;
	}
  }
  .blank-box{
	  padding: 234rpx 0 0;
	  .blank-icon{
		  width: 482rpx;
		  height: 300rpx;
		  margin: 0 auto;
		  display: block;
	  }
	  .submit-btn{
		  margin: 26rpx auto 0;
		  width: 320rpx;
		  height: 80rpx;
		  border-radius: 46rpx;
		  background: linear-gradient(328deg, #03D289 0%, #009B65 100%);
		  font-size: 32rpx;
		  color: #fff;
		  border: none;
		  &::after{
			  border: none;
			  outline: none;
		  }
	  }
  }
</style>
